<template>
	<view @click="showre(null)">
	<z-paging ref="paging" v-model="list" @query="queryList">
		<template #top>
			<uni-nav-bar ref="navBar" statusBar :border="false" backgroundColor="transparent" @clickLeft="goBack">
				<template #left>
					<image class="size-32" src="@/static/svg/icon-back.svg" />
				</template>
				<view class="flex center w-full fs-16"><text class="text-color-regular">提现记录</text></view>
			</uni-nav-bar>
		</template>
		<view v-if="list">
			<view v-for="(item,i) in list" :key="i" class="mt-12 mx-16 p-12 bg-white radius-12">
				<view class="flex justify-between item-center text-color-regular fs-16 font-semibold leading-22">
					<text>提现</text>
					<text>{{item.tradeAmt}}</text>
				</view>
				<view class="mt-8 flex justify-between item-center fs-12">
					<text class="text-color-hint">{{item.applyTime}}</text>
					<view v-if="[2,6].includes(item.state)" class="inline-flex item-center relative" @click.stop="showre(item)">
						<text class="color-primary">{{item.state===2 ? '审核失败' : '提现失败'}}</text>
						<image class="size-16 ml-4" src="@/pagesB/static/icon-fail.svg"></image>
						<view v-if="item.show" class="absolute flex center radius-8 py-4 px-10 fs-12 leading-22 font-normal color-primary" style="top:30px;right:-12px;min-height:40px;width:max-content;max-width:90vw;min-width:40px;border:1px solid rgba(250, 69, 67, 1);background-color:rgba(255, 238, 238, 1);">
							<view class="inline-flex item-center">
								{{item.refuseReason}}
								<!-- <image src="@/pagesB/static/icon-delete.svg" class="size-14 ml-4" @click.stop="showre(null)"></image> -->
							</view>
							<view class="absolute w-0 h-0" style="top:-7px;right:15px;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:8px solid rgba(255, 238, 238, 1);z-index:2;"></view>
							<view class="absolute w-0 h-0" style="top:-9px;right:15px;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:8px solid rgba(250, 69, 67, 1);"></view>
						</view>
					</view>
					<view v-else class="inline-flex item-center">
						<text class="color-secondary-warning" v-if="item.state==1">待审核</text>
						<text class="color-secondary-success" v-if="item.state==3">审核成功</text>
						<text class="color-secondary-warning" v-if="item.state==4">提现中</text>
						<text class="color-secondary-success" v-if="item.state==5">提现成功</text>
					</view>
				</view>
			</view>
		</view>
	</z-paging>
	</view>
</template>

<script setup name="WithdrawRecord">
	import { ref, unref } from 'vue'
	import { useWithdrawStore } from '@/stores/modules/withdraw.js'
	
	const withdrawStore = useWithdrawStore()
	
	const goBack = () => uni.navigateBack()
	
	const showre = (item) => {
		if (item && !item.refuseReason) return // 没有内容不显示
		list.value.forEach(obj => {
			obj.show = false
		})
		if(item){
			item.show = !item.show?true:false
		}
	}
	
	const paging = ref(null)
	const queryParams = ref({
		pageNum: 1,
		pageSize: 10,
		withdrawalType: 3, // 提现类型(1-商户本金提现，2-商户补贴提现，3-佣金提现)
	})
	const list = ref([])
	const queryList = (pageNo, pageSize) => {
		queryParams.value.pageNum = pageNo
		withdrawStore.getRecordList(unref(queryParams))
		.then(res => {
			paging.value.complete(res.list)
		})
	}
</script>
